import React, { Component } from "react";

// 这里处理就是一个默认的数据，还是很不错的。。
const UserContext = React.createContext({
  nickName: "xjh",
  age: 19,
});

const ThemeContext = React.createContext({
  color: "orange",
});

class ProfileHeader extends Component {
  render() {
    const { nickName, age } = this.context;
    return (
      <h2>
        i am title: {nickName + age}
        <div>123</div>
      </h2>
    );
  }
}

// 函数的使用方式有点不一样。。
function ProfileHeader2(props) {
  return (
    <UserContext.Consumer>
      {(value) => {
        return (
          <ThemeContext.Consumer>
            {(theme) => {
              return (
                <div>
                  <h3 style={{ color: theme.color }}>{value.nickName}</h3>
                  <h3>{value.age}</h3>
                  <h3>{theme.color}</h3>
                </div>
              );
            }}
          </ThemeContext.Consumer>
        );
      }}
    </UserContext.Consumer>
  );
}

// 我的值这样的操作是很重要的吗？ 你想要知道这样的处理方式
ProfileHeader.contextType = UserContext;
// ProfileHeader.contextType = ThemeContext;

function Profile() {
  return (
    <div className="profile">
      <ProfileHeader></ProfileHeader>
      <ProfileHeader2></ProfileHeader2>
    </div>
  );
}

export default class App extends Component {
  constructor() {
    super();
    this.state = {
      nickName: "xjh2",
      age: 19,
    };
  }
  render() {
    return (
      <div>
        <UserContext.Provider value={this.state}>
          <ThemeContext.Provider value={{ color: "red" }}>
            <Profile></Profile>
          </ThemeContext.Provider>
        </UserContext.Provider>
      </div>
    );
  }
}
